<template>
    <div class="myhome">
      <el-container>
         <el-header>
          <div class="header-left">
              <h2>邵阳头条</h2>
          </div>
          <div class="header-right">
              <el-button @click="logout()">退出登录</el-button>
          </div>
         </el-header>
         <el-container>
           <el-aside width="200px">
              <el-menu default-active="2" v-for="item in asideslist" :key="item.id" router>
                <el-submenu index="1">
                   <template slot="title">
                      <i class="el-icon-menu"></i>
                      <span>{{item.name}}</span>
                   </template>
                   <el-menu-item :index="'/'+subItem.path" v-for="subItem in item.children" :key="subItem.id">{{subItem.names}}</el-menu-item>
                </el-submenu>
              </el-menu>
              <!-- <el-button @click="add()">+</el-button> -->
           </el-aside>
           <el-main>
              <router-view></router-view>
           </el-main>
         </el-container>
      </el-container>
    </div>
  </template>
  
  <script>
import {GetAsidesList} from '@/api/getAsidesAPI'
  export default {
      data() {
          return {
              asides:{
                  name:''
              },
              asideslist:[]
              
          }
      },
      methods:{
          add(){
  
          },
          async getAsidesList(){
              const {data:res}=await GetAsidesList()
              console.log(res)
              this.asideslist=res
          },
          logout(){
            this.$router.push('/login')
          }
      },
      created(){
          this.getAsidesList()
      }
  
  }
  </script>
  
  <style lang="less" scoped>
  .myhome{
      width: 100%;
      height: 100%;
      .el-container{
          width: 100%;
          height: 100%;
          // border: 1px solid #000;
          .el-header{
              width: 100%;
              background: #93defe;
              display: flex;
              justify-content: space-around;
              align-items: center;
              .header-left{
                width: 100%;
  
              }
          }
          .el-aside{
              width: 100%;
              // background: #f00;
             
          }
      }
  }
  </style>